<template>
    <div class="pageBox">
        <div>
            每页
            <input :value="pageSize"
                   @input="pageSizeChange"
                   type="number">
            条, 共{{total}}条
        </div>
        <ul class="pageContent">
            <li v-for="item,index in pageData"
                :class="{active:pageNum===item}"
                @click="pageClicked(item)"
                :key="index">{{item}}</li>
        </ul>
        <!--<ul class="pageContent">
            <template v-if="pageData.statr > 1">
                <li @click="pageClicked(1)">1</li>
                <li>...</li>
            </template>
            <li v-for="item,index in pageData.pageList"
                :class="{active:pageNum===item}"
                @click="pageClicked(item)"
                :key="index">{{item}}</li>
            <template v-if="pageData.end<pageData.pageCont">
                <li>...</li>
                <li  @click="pageClicked(pageData.pageCont)">{{pageData.pageCont}}</li>
            </template>
        </ul>-->
    </div>
</template>

<script>
    export default {

        props: {
            pageSize: {
                type: Number,
                default: 1
            },
            pageNum: {
                type: Number,
                default: 1
            },
            total: {
                type: Number,
                required: true
            },
        },

        data() {
            return {};
        },

        methods:{
            pageClicked(page){
                console.log("当前选择的页",page);
                this.$emit("pageNumChange", page)
            },
            pageSizeChange(e){
                console.log("每页显示的条数",e.target.value);
                let pageSize = Number(e.target.value);
//                this.$emit("pageSizeChange", e.target.value * 1);
                this.$emit("pageSizeChange", pageSize)
            },
        },

        computed: {
            pageData(){
                let pageList = [];
                let pageSize = this.pageSize;//01234 Number
                if(pageSize<=0){
                    pageSize = 1
                }
                let pageCont = Math.ceil(this.total/pageSize);
                for(let i=1 ;i<=pageCont;i++){
                    pageList.push(i)
                }
                return pageList
            },
/*            pageData(){
                //当前页 5
                let statr = this.pageNum - 2;//3
                let end = this.pageNum + 2;//7
                let pageSize = this.pageSize;//01234 Number
                if(pageSize<=0){
                    pageSize = 1
                }
                let pageCont = Math.ceil(this.total/pageSize);
                if(statr<1){
//                    end += 1 - statr;
                    statr = 1;
                }
                if(end > pageCont){
//                    statr -= end - pageCont;
                    if(statr<1){
                        statr = 1
                    }
                    end = pageCont
                }
                let pageList = [];
                for(let i=statr ;i<=end;i++){
                    pageList.push(i)
                }
                return {
                    statr,
                    end,
                    pageList,
                    pageCont
                }
            }*/
        }
    };
</script>

<style>
    .pageBox{
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .pageContent{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .pageContent li{
        display: inline-block;
        margin-left: -1px;
        border: 1px solid #333;
        min-width: 22px;
        text-align: center;
        cursor: pointer; /*小手*/
        user-select: none; /*用户不可选*/
    }
    .pageContent li:hover{
        background-color: #0AAEB3;
    }

    .pageContent .active{
        background-color: red;
    }

</style>
